<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style>
			.router-link-active {
				color: red;
				font-size: 80px;
			}
		</style>


		<script src="js/vue.js"></script>
		<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<div id="app">
			<a href="#/login">登录</a>
			<a href="#/reg">注册</a>
			<hr /> tag可以改变渲染html组件类型； 没有则默认是a标签；
			<br />
			第一种，直接再to的路由地址后面加?加参数，
			<router-link to="/login?id=10" tag="button">登录</router-link>
			<router-link to="/reg/20/薛一刚" >注册</router-link>
			<router-view></router-view>

		</div>

		<script>
			//创建组件模板对象；
			var login = {
				template: "<h1>登录</h1>",
				data(){
					return {
						id:""
					}
				},
				created(){
					console.log(this.$route.query.id)
				}
			}

			var reg = {
				template: "<h1>注册</h1>",
				created(){
					console.log(this.$route.params.id+"，"+this.$route.params.name)
				}
			}
			//创建路由对象；

			var router = new VueRouter({
				//设置路由规则；至少有两个属性
				//path 组件地址；
				//component: 对应组件
				//path:'/'默认地址，redirect,跳转到
				routes: [{
						path: '/',
						redirect: '/login'
					},{
						path: '/login',
						component: login
					},
					{
						//第二种,再path加/：参数名，做匹配
						//必须完全匹配，有几个参数，router-link里面必须有几个参数值；
						path: '/reg/:id/:name',
						component: reg
					}
				],
				//自定义，路由高亮style样式；
				//linkActiveClass:"myactiveClass"

			});

			var vm = new Vue({
				el: "#app",
				data: {

				},
				methods: {

				},
				router: router //注册路由对象注册到vue中

			});
		</script>
	</body>

</html>